<template>
	<view class="an-body">
		<!-- <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" > -->
		<nodata v-if="visiterlist.length==0"></nodata>
		<view class="topics p10" v-for="(item,index) in visiterlist">

			<view class="an-top-bg bg_white p5" >
				<!-- 用户信息 -->				 
				<view class="company">{{item.company_name}}</view>
				<view class="an-userInfo" @click="visitor(item)">
					<view class="an-user">
						<image style="width: 60px; height: 60px; background-color: #eeeeee;" mode="aspectFill" :src="item.personimg | personimg" @error="imageError"></image>
					</view>
					<view class="an-user-text1">
						<view style="color: black;">
							<view class="an-user-first">
								<p>{{item.name?item.name:'用户不存在'}}</p>
								<p>{{item.mobile?item.mobile:''}}</p>
							</view>
							<view class="an-user-second">
								<p>{{item.endtime?item.endtime:''}}</p>
								<p>访问部门：{{item.dept_name?item.dept_name:'暂无'}}</p>
							</view>
						</view>
					</view>
				</view>
				
			
			
			
			<view class="topics-operation">
				<!-- <view class="topics-del" v-if="delchanger" @click="del(item.id)">删除</view> -->
				<!-- <view class="topics-modify" @click="modify(index)">修改</view> -->
				<view class="topics-details" :class="delchanger?'':'mlA'" @click="visitor(item)">详情</view>
			</view>
			<view class="topics-foot m10"></view>
			</view>	
		</view>
			<!-- </mescroll-uni>
		 -->	
			<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot } from '@/common/util.js';
import defaultImg from '@/static/img/userImg.jpg';
import {visiteradd,visiteredit,visiterdel,visiterlist} from '@/common/api/visiter.js'
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {timestampToTime} from "@/common/common.js"
const icoList = [
	{
		id: 1,
		ico: 'icon-icon-test7',
		text: '文章管理',
		color: 'color1'
	},
	{
		id: 2,
		ico: 'icon-icon-test3',
		text: '留言管理',
		color: 'color2'
	},
	{
		id: 3,
		ico: 'icon-icon-test6',
		text: '打卡管理',
		color: 'color3'
	},
	{
		id: 4,
		ico: 'icon-wode',
		text: '用户管理',
		color: 'color4'
	}
];
export default {
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	data() {
		return {
			userSrc: defaultImg,
			grids: [],
			visiterlist:[],
			page:1,
			pageSize:10,
			delchanger:false,
		};
	},
	onLoad() {
		uni.getStorage({
			key:'userinfo',
			success: (res) => {
				if(res.data.roleid == 1 || res.data.roleid == 2 || res.data.roleid == 3){
					this.delchanger = true
				}
			}
		})
		this.getvisiterList()
		this.userSrc = hostRoot + 'uploads/' + this.userInfo.photoUrl;
	},
	onShow() {
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		this.grids = [];
		if (!this.hasLogin) {
			this.bindLogin();
		} else if (this.userInfo.grade == 2 || this.userInfo.grade == 3) {
			this.grids = icoList;
		} else {
			this.grids.push(icoList[0]);
			this.grids.push(icoList[1]);
		}
	},
	methods: {
		retime(val){
			return timestampToTime(val)
		},
		
		...mapMutations(['logout']),
		/*获取访客列表*/
		getvisiterList(){
			visiterlist({
				'page':this.page,
				'pagesize':this.pageSize
			}).then(res=>{
				if(res.data.code == 400){
					return
				}
				// this.visiterlist = res.data.data
			this.page++
			for (let i = 0; i < res.data.data.length; i++) {
				this.visiterlist.push(res.data.data[i])
			}
			})
		},
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../message/messageList/messageList';
					break;
				case 3:
					url = '../sign/sign';
					break;
				case 4:
					url = '../user/userList';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		editPwd() {
			// 修改密码
			uni.navigateTo({
				url: '../pwd/pwd'
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		},
		/*详情*/
		visitor(item){
			// uni.navigateTo({
			// 	url: './visitorDetails'
			// });
			uni.navigateTo({
				url: './visitorauditDetails'+'?visitorinfo='+JSON.stringify(item)
			});
		},
		/*删除长期访问人*/
		del(id){
			let _that  = this
			uni.showModal({
			    title: '该访客不再设为长期访问',
			    // content: 'gg',
			    success: function (res) {
			        if (res.confirm) {
						visiterdel({'id':id}).then(res=>{
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
							if(res.data.code==200){
								_that.visiterlist=[];
								_that.page=1;
								_that.getvisiterList();
							}
						})
			            // console.log('用户点击确定');
			        } else if (res.cancel) {
						return 
			            // console.log('用户点击取消');
			        }
			    }
			});
			// visiterdel({'id':id}).then(res=>{
			// 	uni.showToast({
			// 		title: res.data.message,
			// 		icon: 'none'
			// 	});
			// 	if(res.data.code==200){	
			// 		this.page=1;
			// 		this.getvisiterList();
			// 	}
			// })
		},
		

		
	}
};
</script>

<style lang="scss" scoped>
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			// width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
.an-top-bg{
	height: auto;
	// padding: 0px 0px 0px 0px;
	position: static !important;
}
	
uni-button{
	width: 80px;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
}
.cc{
	background: #007aff;
	color: white;
	margin-right: 10px;
	float: right;
}
.cc2{
	background: #ED6C19;
	color: white;
	margin-right: 10px;
	float: right;
}
.an-userInfo{
	background: white;
	margin-top: 10px;
}
.an-user{
	margin-top: 5px;
	width: 19%;
}
.an-user image{
	border-radius:50% ;
}
.an-user-text{
	margin-top: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
}
.an-user-text1{
	width: 80%;
	margin-bottom: 10px;
	margin-left:2%;
}
.company{
	color: black;
	margin-left: 10px;
}
.an-user-first{
	float: left;
	width: 50%;
	margin-top: 10px;
}
.an-user-second{
	float: left;
	width: 49%;
	margin-top: 10px;
	text-align: right;
}
	.topics-operation {
		
		justify-content: flex-end;
		// width: 65%;
		margin-left: auto;
		display: flex;
		uni-view {
			width: 77px;
			height: 30px;
			margin: 0 5px;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(212, 48, 48, 1);
			border-radius: 18px;
			font-size: 15px;
			line-height: 30px;
			text-align: center;
		}
		.topics-modify {
			color: rgba(80, 80, 80, 1);
			background-color: rgba(166, 166, 166, 1);
		}
		.topics-details {
			background-color: rgba(42, 130, 228, 1);
		}
	}
</style>
